<!--
 * @Description: 
 * @Autor: starzhou
 * @Date: 2020-08-31 20:34:35
 * @LastEditTime: 2020-09-09 10:43:32
-->
<template>
    <div id="pageHead">
        <el-header height="72px">
            <span class="logoImg">LOGO</span>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1" class="accoutName" @click="$router.push('/loginer')">
                    <i></i>
                    <span>{{userInfo.loginName}}</span>
                </el-menu-item>
                <el-submenu index="2" v-if="userInfo.isFrontAcct == 1">
                    <template slot="title">{{userInfo.userName}}</template>
                    <el-menu-item index="2-1">用户1</el-menu-item>
                    <el-menu-item index="2-2">用户2</el-menu-item>
                </el-submenu>
                <el-menu-item class="el-icon-switch-button logout" index="4" @click="logout"></el-menu-item>
            </el-menu>
        </el-header>
    </div>
</template>
<script>
import '../assets/css/header.css'
export default {
    data(){
        return{
            activeIndex: '1'
        }
    },
    computed: {
        userInfo () {
            return this.$store.state.user
        }
    },
    methods:{
        logout() {
            this.$Api.logout().then(() => {
                this.$store.commit('clearUserInfo')
                this.$router.replace('/login')
            })
        },
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        }
    }
}
</script>
<style scoped>

</style>